import { ThemeSettingMap } from '@/configs/theme';
import { themeReducer } from '@/store/ThemeReducer';
import { CheckOutlined, CloseOutlined, CopyOutlined } from '@ant-design/icons';
import { Button, Divider, Drawer, Select, Switch } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { styled } from 'styled-components';

const ThemeSettingLayout = styled(Drawer)`
  &.theme-setting {
    .theme-content {
      display: flex;
      flex-direction: column;
      .theme-group {
        display: flex;
        flex-direction: column;
        .theme-group-title {
          margin-bottom: 12px;
          color: rgba(0, 0, 0, 0.85);
          font-size: 14px;
          line-height: 22px;
        }
        .theme-list {
          display: flex;
          flex-direction: column;
          position: relative;
          margin: 0;
          padding: 0;
          overflow: hidden;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
          line-height: 1.5715;
          list-style: none;
          box-sizing: border-box;

          .theme-list-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 1;
            padding: 12px 0;
            color: rgba(0, 0, 0, 0.85);
            list-style: none;

            .theme-list-item-action {
              flex: 0 0 auto;
              padding: 0;
              font-size: 0;
              list-style: none;
            }
          }

          &.theme-list-style {
            .theme-list-item {
              flex: 0 0 auto;
              justify-content: flex-start;
              cursor: pointer;
            }
          }

          &.theme-list-color {
            flex-flow: row wrap;
            .theme-list-item {
              flex: 0 0 auto;
              justify-content: center;
              width: 20px;
              height: 20px;
              margin-top: 8px;
              margin-right: 8px;
              padding: 0;
              font-weight: 700;
              color: #fff;
              text-align: center;
              border-radius: 2px;
              cursor: pointer;
            }
          }

          .theme-layout-item {
            position: relative;
            width: 44px;
            height: 36px;
            margin-left: 4px;
            margin-right: 16px;
            overflow: hidden;
            background-color: #f0f2f5;
            border-radius: 4px;
            box-shadow: 0 1px 2.5px 1px rgba(0, 0, 0, 0.3);
            cursor: pointer;

            &:before {
              position: absolute;
              top: 0;
              left: 0;
              width: 33%;
              height: 100%;
              background-color: #fff;
              content: '';
            }
            &:after {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 25%;
              background-color: #001529;
              content: '';
            }

            /* 整体风格：light & dark */
            &.theme-layout-item-light {
              &:before {
                z-index: 1;
                background-color: #fff;
              }
              &:after {
                background-color: #fff;
              }
            }

            &.theme-layout-item-dark {
              &:before {
                z-index: 1;
                background-color: #001529;
              }
              &:after {
                background-color: #001529;
              }
            }

            /* 导航风格：side|top */
            &.theme-layout-item-side {
              &:before {
                background-color: #001529;
                z-index: 1;
              }
              &:after {
                background-color: #fff;
              }
            }

            &.theme-layout-item-top {
              &:before {
                background-color: transparent;
              }
              &:after {
                background-color: #001529;
                z-index: 1;
              }
            }
            &.theme-layout-item-mix {
              &:before {
                background-color: #001529;
              }
              &:after {
                background-color: #001529;
                z-index: 1;
              }
            }

            .theme-layout-item-selected {
              position: absolute;
              right: 6px;
              bottom: 4px;
              font-weight: 700;
              font-size: 14px;
              color: var(--ant-primary-color);
              pointer-events: none;
            }
          }
        }
      }
    }
  }
`;

interface Props {
  onClose: () => void;
}

/**
 * 主题风格设置
 */
export const ThemeSetting: React.FC<Props> = (props) => {
  const { onClose } = props;

  // 获取redux派发钩子
  const dispatch = useDispatch();

  // 获取store中的主题配置
  const globalTheme = useSelector((state: any) => state?.theme);

  const {
    navTheme,
    colorPrimary,
    layout,
    siderMenuType,
    layoutFixed,
    contentArea,
  } = ThemeSettingMap;

  return (
    <ThemeSettingLayout
      width={300}
      title="主题设置"
      destroyOnClose
      maskClosable
      open={true}
      closable={false}
      onClose={onClose}
      extra={<CloseOutlined onClick={onClose} />}
      footer={null}
      className="theme-setting">
      <div className="theme-content">
        <div className="theme-group">
          <div className="theme-group-title">整体风格设置</div>
          <ul className="theme-list theme-list-style">
            <li className="theme-list-item">
              {navTheme?.data?.map((item, idx) => {
                return (
                  <div
                    key={idx}
                    className={`theme-layout-item theme-layout-item-${item.value}`}
                    onClick={() => {
                      dispatch(themeReducer?.setNavTheme(item.value));
                    }}>
                    {globalTheme?.navTheme === item.value && (
                      <CheckOutlined
                        className="theme-layout-item-selected"
                        style={{
                          fontSize: 14,
                        }}
                      />
                    )}
                  </div>
                );
              })}
            </li>
          </ul>
        </div>
        <Divider />
        <div className="theme-group">
          <div className="theme-group-title">主题色</div>
          <ul className="theme-list theme-list-color">
            {
              // 遍历globalConfig配置的customColorPrimarys主题色
              colorPrimary?.data?.map((item, idx) => {
                return (
                  <li
                    key={idx}
                    className="theme-list-item"
                    onClick={() => {
                      dispatch(themeReducer?.setColorPrimary(item.value));
                    }}
                    style={{ backgroundColor: item.value }}>
                    {
                      // 如果是当前主题色，则显示“对勾”图标
                      globalTheme.colorPrimary === item.value && (
                        <CheckOutlined
                          style={{
                            fontSize: 14,
                            color: '#fff',
                          }}
                        />
                      )
                    }
                  </li>
                );
              })
            }
          </ul>
        </div>
        <Divider />
        <div className="theme-group">
          <div className="theme-group-title">导航模式</div>
          <ul className="theme-list">
            <li className="theme-list-item">
              {layout.data.map((item, idx) => {
                return (
                  <div
                    key={idx}
                    className={`theme-layout-item theme-layout-item-${item.value}`}>
                    {globalTheme.layout === item.value && (
                      <CheckOutlined
                        className="theme-layout-item-selected"
                        style={{
                          fontSize: 14,
                        }}
                      />
                    )}
                  </div>
                );
              })}
            </li>
          </ul>
        </div>
        <div className="theme-group">
          <div className="theme-group-title">侧边菜单类型</div>
          <ul className="theme-list theme-list-style">
            <li className="theme-list-item">
              {siderMenuType.data.map((item, idx) => {
                return (
                  <div
                    key={idx}
                    className={`theme-layout-item theme-layout-item-${item.value}`}
                    onClick={() => {
                      dispatch(themeReducer?.setSiderMenuType(item.value));
                    }}>
                    {globalTheme.siderMenuType === item.value && (
                      <CheckOutlined
                        className="theme-layout-item-selected"
                        style={{
                          fontSize: 14,
                        }}
                      />
                    )}
                  </div>
                );
              })}
            </li>
          </ul>
        </div>
        <div className="theme-group">
          <ul className="theme-list">
            {layoutFixed.data.map((item, idx) => {
              return (
                <li key={idx} className="theme-list-item">
                  <span>{item.label}</span>
                  <div className="theme-list-item-action">
                    {item?.options ? (
                      <Select
                        defaultValue={globalTheme[item.name]}
                        style={{ width: 100 }}
                        options={item.options}
                      />
                    ) : (
                      <Switch
                        size="small"
                        defaultChecked={globalTheme[item.name]}
                      />
                    )}
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
        <Divider />
        <div className="theme-group">
          <div className="theme-group-title">内容区域</div>
          <ul className="theme-list">
            {contentArea.data.map((item, idx) => {
              return (
                <li key={idx} className="theme-list-item">
                  <span>{item.label}</span>
                  <div className="theme-list-item-action">
                    <Switch
                      size="small"
                      defaultChecked={globalTheme[item.name]}
                    />
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
        <Divider />
        <div className="theme-group">
          <div className="theme-group-title">其它设置</div>
          <ul className="theme-list">
            <li className="theme-list-item"></li>
          </ul>
        </div>
        <Divider />
        <div className="theme-group">
          <Button icon={<CopyOutlined />} block>
            拷贝配置
          </Button>
        </div>
      </div>
    </ThemeSettingLayout>
  );
};
